<template>
  <div>
    <nav-menus :collapse="collapse" :mode="mode" :list="items"></nav-menus>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>

  <!--<ul>-->
    <!--<li><router-link to="/dynamicForm">DynamicForm</router-link></li>-->
    <!--<li><router-link to="/grid">Grid</router-link></li>-->
  <!--</ul>-->
</template>

<script>
  import NavMenus from '../../libs/menu/menu'

  function checkPermission (item) {
//    console.log(item)
    return true
  }
  export default {
    components: {
      NavMenus
    },
    mounted () {
    },
    data () {
      return {
//        mode: 'horizontal',
        mode: '',
        collapse: false,
        items: [
          {
            icon: 'fa fa-table',
            index: '1',
            title: '导航一',
            show: checkPermission
          },
          {
            icon: 'fa fa-slack',
            index: '2',
            title: '表单',
            children: [
              {
                icon: 'fa fa-slack',
                index: 'test',
                title: '测试',
                show: checkPermission
              },
              {
                icon: 'fa fa-slack',
                index: 'dynamicForm',
                title: '表单',
                show: checkPermission
              }
            ]
          },
          {
            icon: 'fa fa-tachometer',
            index: '3',
            title: '导航三',
            show () {
              return true
            },
            children: [
              {
                icon: 'fa fa-slack',
                index: 'counters',
                title: '选项1',
                show: checkPermission
              },
              {
                icon: 'fa fa-slack',
                index: 'menu',
                title: '菜单',
                show: checkPermission
              },
              {
                index: 'upload',
                title: '选项3',
                show: checkPermission,
                children: [
                  {
                    icon: 'fa fa-slack',
                    index: 'baseform',
                    title: '选项1',
                    show: checkPermission
                  },
                  {
                    icon: 'fa fa-slack',
                    index: 'vueeditor',
                    title: '选项2',
                    show: checkPermission
                  },
                  {
                    index: 'upload',
                    title: '选项3',
                    show: checkPermission
                  }
                ]
              }
            ]
          },
          {
            icon: 'fa fa-money',
            index: 'grid',
            title: '表格',
            show: checkPermission
          },
          {
            icon: 'fa fa-language',
            index: '',
            title: '导航五',
            show: checkPermission
          }
        ]
      }
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>

  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    li{
      display: block;
      line-height: 24px;
    }
  }

  .content{
    position: absolute;
    left: 220px;
    top: 0;
    right:0;
    bottom: 0;
  }

</style>
